<template>
	<el-container>
		<el-aside width="150px" v-loading="showGrouploading">
			<el-container>
				<el-main class="nopadding">
					<div class="status-items">
						<a href="javascript:;" :key="l.value" v-for="(l, index) in group" @click="statusChange(index)"
						   :class="l.checked ? 'on' : ''">
							{{ l.label }}</a>
					</div>
				</el-main>
			</el-container>
		</el-aside>
		<el-container>
			<el-header>
				<div class="left-panel">
					<el-button type="primary" plain icon="el-icon-refresh" @click="tableRefresh(true)" />
				</div>
				<div class="right-panel">
					<div class="right-panel-search">
						<el-form inline v-model="search" label-position="right">
							<el-form-item label="关键词">
								<template #label>
									<el-select v-model="search.keyWordType">
										<el-option label="订单信息" value="order_info"></el-option>
										<el-option label="买家信息" value="buy_info"></el-option>
									</el-select>
								</template>
								<el-input v-model="search.keyWord" placeholder="请输入名称、标题等关键词" clearable></el-input>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
							</el-form-item>
						</el-form>
					</div>
				</div>
			</el-header>
			<el-main class="nopadding">
				<scTableGdshop ref="table" tableName="goodsTable" :apiObj="apiObj" stripe remoteSort remoteFilter
							   :params="tableParams" :column="tableColumn" :onLoad="tableOnLoad">

					<template #order_info="scope">
						<div class="order-info">
							<div class="order-title">
								<span class="store-name">{{ scope.row.store_name }}</span>
								<span class="order-on"> 订单号：{{ scope.row.order_no }} </span>
								<span class="order-time">
										下单时间：{{ showDateTime(scope.row.create_at) }}
									</span>
							</div>
							<div class="order-subs">
								<div
									class="order-sub-item"
									style="border-bottom: 1px solid #e7e5e5; padding: 3px 0"
								>
									<goods-info-item
										:row="scope.row"
										:baseUrl="baseUrl"
										type="order"
									/>
								</div>
							</div>
						</div>
					</template>

					<template #buy_info="scope">
						<order-buy-info :orderRow="scope.row" />
					</template>

					<template #status="scope">
						<div>订单状态：{{ getOrderStatusText(scope.row.status) }}</div>
						<div>售后状态：<span :class="'dialogTables-status' + scope.row.refund_status">{{ getRefundStatusText(scope.row.refund_status) }}</span></div>
					</template>

					<template #shijian="scope">
						<div v-if="scope.row.refund">
							<div>申请时间</div>
							<div>
								{{ showDateTime(scope.row.refund.apply_time) }}
							</div>
						</div>
						<div v-if="scope.row.refund && scope.row.refund.handle_time">
							<div>处理时间</div>
							<div>
								{{ showDateTime(scope.row.refund.handle_time) }}
							</div>
						</div>
					</template>

					<template #price_info="scope">
						<div>实付：{{ getMoneyByMinute(scope.row.paid) }}</div>
						<div>退款：{{ getApplyMoney(scope.row.refund) }}</div>
					</template>

					<el-table-column label="操作" fixed="right" align="center" width="100">
						<template #default="scope">
							<div>
								<el-button
									size="mini"
									class="btn-link"
									type="text"
									@click="openDialog(scope.row)"
								>查看</el-button
								>
							</div>
							<div v-if="scope.row.refund_status === 3">
								<el-button
									size="mini"
									class="btn-link"
									type="text"
									@click="orderRefund(scope.row.id)"
								>退款</el-button
								>
							</div>
						</template>
					</el-table-column>
				</scTableGdshop>
			</el-main>
		</el-container>

		<el-dialog title="处理售后" v-model="openDialogShow" width="80%">
			<div>
				<el-table :data="dialogTables" style="width: 100%">
					<el-table-column label="售后" width="120">
						<template #default="scope">
							<div>{{ scope.row.refund_no }}</div>
							<div>{{ getRefundTypeText(scope.row.refund_type) }}</div>
							<div>{{ getReasonTypeText(scope.row.reason_type) }}</div>
						</template>
					</el-table-column>
					<el-table-column label="申请">
						<template #default="scope">
							<div>申请时间：{{ showDateTime(scope.row.apply_time) }}</div>
							<div>
								金额：<span style="color: #f00; font-weight: 700"
							>￥ {{ getMoneyByMinute(scope.row.apply_money) }}</span
							>
							</div>
						</template>
					</el-table-column>
					<el-table-column label="补充信息">
						<template #default="scope">
							<div>{{ scope.row.apply_remark }}</div>
							<div>快递信息</div>
							<div>{{ scope.row.express_com }}</div>
							<div>{{ scope.row.express_sn }}</div>
						</template>
					</el-table-column>
					<el-table-column label="处理结果" width="80">
						<template #default="scope">
							<div :class="'dialogTables-status' + scope.row.status">{{ refundStatusTextArr[scope.row.status] }}</div>
						</template>
					</el-table-column>
					<el-table-column label="处理">
						<template #default="scope">
							<div>处理人：{{ scope.row.handle_admin_name }}</div>
							<div v-if="scope.row.status == 2">
								拒绝理由：{{ scope.row.handle_remark }}
							</div>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div v-if="dialogData.id">
				<div
					style="
						text-align: center;
						background-color: #ebeef5;
						height: 30px;
						line-height: 30px;
					"
				>
					待处理
				</div>
				<el-form ref="form" :model="dialogData" label-width="120px">
					<el-row>
						<el-col :span="6">
							<el-form-item label="售后单号">
								{{ dialogData.refund_no }}
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="售后类型">
								{{ getRefundTypeText(dialogData.refund_type) }}
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="退款原因">
								{{ getReasonTypeText(dialogData.reason_type) }}
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="申请时间">
								{{ showDateTime(dialogData.apply_time) }}
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="申请退款金额">
								<div style="color: #f00; font-weight: 700">
									￥ {{ getMoneyByMinute(dialogData.apply_money) }}
								</div>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="快递公司名称">
								{{ dialogData.express_com }}
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="退货运单号">
								{{ dialogData.express_sn }}
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="补充说明">
								{{ dialogData.apply_remark }}
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="补充凭证">
								{{ dialogData.apply_certificate }}
							</el-form-item>
						</el-col>
						<div class="el-col el-col-24"
							 style="
						text-align: center;
						background-color: #ebeef5;
						height: 30px;
						line-height: 30px;
					"
						>
							处理
						</div>
						<el-col :span="12">
							<el-form-item label="处理结果">
								<el-radio v-model="dialogData.status" :label="3">同意</el-radio>
								<el-radio v-model="dialogData.status" :label="2">拒绝</el-radio>
							</el-form-item>
						</el-col>
						<el-col :span="12" v-show="dialogData.status === 2">
							<el-form-item label="拒绝理由">
								<el-input v-model="dialogData.handle_remark" type="textarea" />
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="openDialogShow = false">取 消</el-button>
					<el-button type="primary" v-if="dialogData.id" @click="submitHandle"
					>确 定</el-button
					>
				</span>
			</template>
		</el-dialog>
	</el-container>
</template>

<script>
import orderBuyInfo from "../order/orderBuyInfo.vue"
import {ElMessage, ElMessageBox} from "element-plus";

export default {
	name: "order-refund-index",
	components: {
		orderBuyInfo
	},
	data() {
		return {
			apiObj: this.$API.shop.orderRefund,
			dialog: {
				save: false
			},
			showGrouploading: false,
			groupFilterText: '',
			group: [],
			selection: [],
			search: {
				keyWord: '',
				keyWordType: '',
				category_id: 0,
			},
			baseUrl: '',
			tableParams: {
				list_type: 1,
			},
			openDialogShow: false,
			statusTextArr: [],
			refundStatusTextArr: [],
			tableColumn: [
				{
					prop: "order_info",
					label: "订单",
					align: "left"
				},
				{
					prop: "buy_info",
					label: "买家",
					width: 110
				},
				{
					prop: "status",
					label: "状态",
					width: 120
				},
				{
					prop: "shijian",
					label: "时间",
					width: 150
				},
				{
					prop: "price_info",
					label: "款项",
					width: 120
				},
			],
			tmpGoods: {},
			shopCategorys: [],
			dialogTables: [],
			dialogData: {}
		};
	},
	mounted() {
		this.getBaseUrl()
		this.initData();
	},
	methods: {
		initData() {
			this.$API.shop.orderRefund.getListTypes().then(res => {
				if (res.code === 0) {
					this.group.length = 0;
					this.group.push(...res.data);
				}
			})
		},
		async getBaseUrl() {
			this.baseUrl = await this.$TOOL.getBaseUrl(this.$API)
		},
		orderRefund(_id) {
			let that = this;
			ElMessageBox.confirm("确定执行退款吗？", "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning"
			})
				.then(() => {
					that.$API.shop.orderRefund
						.refund({ id: _id })
						.then((res) => {
							if (res.code === 0) {
								ElMessage.success("退款已发起");
							}
							else {
								ElMessage.error("处理失败，" + res.message);
							}
						})
						.catch((err) => {
							ElMessage.error("处理失败，" + err);
						});
				})
				.catch(() => {});
		},
		tableOnLoad(res) {
			if (res.code === 0) {
				this.statusTextArr = res.data.statusTextArr;
				this.refundStatusTextArr = res.data.refundStatusTextArr;
			}
			return res;
		},
		getRefundStatusText(status) {
			return this.refundStatusTextArr[status];
		},
		getOrderStatusText(status) {
			return this.statusTextArr[status];
		},
		showDateTime(val) {
			return this.$TOOL.dateFormat(val * 1000)
		},
		statusChange(index) {
			// this.claerSearchInfo();
			this.group.map((e,i) => {
				e.checked = index === i
				if (e.checked) {
					this.tableParams.list_type = e.value
				}
			})
			this.$refs.table.refresh();
		},
		tableRefresh(isClaer = false) {
			if (isClaer === true) {
				this.search.keyWord = '';
				// this.$refs.table.reload(this.search);
			}
			// else {
			// 	this.$refs.table.refresh();
			// }
			this.$refs.table.refresh();
		},
		getApplyMoney(_refundRow) {
			if (!_refundRow) {
				return "0.00";
			}
			return this.getMoneyByMinute(_refundRow["apply_money"]);
		},
		getMoneyByMinute(_value) {
			return this.$TOOL.getMoneyByMinute(_value);
		},
		openDialog(_row) {
			this.$API.shop.orderRefund
				.getHandle({ id: _row.id })
				.then((res) => {
					console.log(res);
					if (res.code === 0) {
						if (res.data.handle) {
							this.dialogData = res.data.handle;
							this.dialogData.status = 3;
						}
						this.dialogTables = res.data.list;
					}
				})
				.catch((err) => {
					console.log(err);
				});
			this.openDialogShow = true;
		},
		getRefundTypeText(refund_type) {
			switch (refund_type) {
				case 3:
					return "换货";
				case 2:
					return "退货退款";
				case 1:
					return "仅退款";
				default:
					return "未知";
			}
		},
		getReasonTypeText(reason_type) {
			switch (reason_type) {
				case 4:
					return "快递/物流一直未找到";
				case 3:
					return "未按约定发货";
				case 2:
					return "空包裹";
				case 1:
					return "不喜欢/不想要";
				default:
					return "未知";
			}
		},
		submitHandle() {
			if (this.dialogData.status === 2) {
				if (!this.dialogData.handle_remark.length < 1) {
					ElMessage.error("请填写拒绝理由");
					return;
				}
			}
			this.$API.shop.orderRefund.submitHandle({
				id: this.dialogData.id,
				status: this.dialogData.status,
				handle_remark: this.dialogData.handle_remark
			}).then((res) => {
				if (res.code === 0) {
					ElMessage.success("处理成功");
					this.openDialogShow = false;
					this.tableRefresh();
				}
				else {
					ElMessage.error("处理失败，" + res.message);
				}
			}).catch((err) => {
				console.log(err);
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.goods-box {
	display: flex;
}
.status-items{margin-top: 10px;}
.status-items a{
	display: block;
	line-height: 36px;
	text-align: center;
	color: #000;
	background-color: #fff;
	margin-bottom: 1px;
	font-size: 12px;
	&:hover {
		background-color: #85a1f8;
		color: #fff;
	}
	&.on {
		background-color: #ecf5ff;
		color: #409eff;
	}
}
.goods-status {
	width: 200px;
	background-color: #f5f7fa;
	.goods-ststus-title {
		line-height: 40px;
		text-align: center;
		background-color: #fff;
	}
	.godos-status-items {
		margin-top: 10px;
	}
	a {
		display: block;
		line-height: 36px;
		text-align: center;
		color: #000;
		background-color: #fff;
		margin-bottom: 1px;
		margin-right: 2px;
		font-size: 12px;
		&:hover {
			background-color: #6784df;
			color: #fff;
		}
		&.on {
			background-color: #4165d7;
			color: #fff;
		}
	}
}
.goods-list {
	width: 100%;
}
.goods-stock-box {
	text-align: center;
	.btn-edit {
		position: absolute;
		margin-top: -25px;
		right: 10px;
	}
}
.goods-price-box {
	text-align: center;
	.btn-edit {
		position: absolute;
		margin-top: -25px;
		right: 10px;
	}
}
.goods-price {
	color: #f56c6c;
}
.btn-edit {
	i {
		cursor: pointer;
		&:hover {
			color: #00a0e9;
		}
	}
}
.active {
	display: none;
}
.hover-btn:hover {
	.active {
		display: inline;
	}
}

.order-info {
	margin-top: 5px;
	.order-title {
		color: #909399;

		.store-name {
			border: 1px solid #00a0e9;
			color: #00a0e9;
			font-weight: 700;
			padding: 3px 5px;
			margin-right: 5px;
		}

		.order-time {
			margin-left: 15px;
		}
	}
	.order-subs {
		.order-sub-item {
			position: relative;

			.order-sub-refund {
				position: absolute;
				right: 5px;
				bottom: 0;
			}
		}
	}
}
.dialogTables-status1{
	font-weight: 700;
	color: #E6A23C;
}
.dialogTables-status2{
	font-weight: 700;
	color: #F56C6C;
}
.dialogTables-status3{
	font-weight: 700;
	color: #409EFF;
}
.dialogTables-status99{
	font-weight: 700;
	color: #67C23A;
}
</style>
